<apes-header *ngIf="!hideBtnBar">
  <apes-button-list class="buttonList" [ctx]="ctx" [buttonBarMetadata]="btnBar" [buttonGroupMetadata]="btnGroup"
                    (click)="onEvent($event)" (mouseover)="onMouseOver($event)"></apes-button-list>
  <apes-status-bar class="statusBar" [ctx]="ctx" [btnStatusMetadata]="statusBar"></apes-status-bar>
</apes-header>
<div class="apes-form-container" [ngClass]="{'showBtnBar': !hideBtnBar}">

  <apes-relevancy-link *ngIf="searchFormViewType==='form'" [relevancy]="relevancyMetadata"></apes-relevancy-link>
  <apes-split *ngIf="searchFormViewType==='form'" [direction]="direction" [height]="_height">
    <apes-split-area minSize="30" [size]="leftSize" [order]="1">
      <div class="searchForm" [ngClass]="{'test': relevancyMetadata}">
        <apes-card [apesTitle]="'查询条件'" [apesBordered]="false">
          <apes-search-form #search [form]="searchForm" [model]="searchModel" [options]="searchOption"
                            [searchFormMetadata]="searchFormMetadata" [ctx]="ctx"></apes-search-form>
        </apes-card>
      </div>
    </apes-split-area>
    <apes-split-area minSize="30" [size]="100-leftSize" [order]="2">
      <form apes-form>
        <apes-container [datas]="formMetadata" [form]="form" [model]="model" [options]="options" [height]="_height"
                        [apesPrefixCls]="'apes-container'">
          <apes-chatter [notes]="notes" [processInstanceId]="processInstanceId" [model]="model"></apes-chatter>
        </apes-container>
      </form>
    </apes-split-area>
  </apes-split>

  <form apes-form *ngIf="searchFormViewType ==='dialog'">
    <apes-container [datas]="formMetadata" [form]="form" [relevancy]="relevancyMetadata" [model]="model"
                    [options]="options" [height]="_height"
                    [apesPrefixCls]="'apes-container'">
      <apes-chatter [notes]="notes" [processInstanceId]="processInstanceId" [model]="model"></apes-chatter>
    </apes-container>
    <div *ngIf="stepsGuide"
         class="apes-steps-guide"
         apes-tooltip
         [apesTooltipTitle]="'操作指南'"
         [apesMouseEnterDelay]="0.5"
         (click)="resetStepsGuide(0)">
      <apes-badge [apesDot]="true">
        <i apes-icon apesType="book" style="color: #fff;"></i>
      </apes-badge>
    </div>
    <ng-container *ngIf="stepsGuide">
      <div *ngFor="let step of stepsItem;let i = index"
           dStepsGuide
           class="show-steps-guide"
           [targetElement]="step.targetElement"
           [scrollToTargetSwitch]="false"
           [pageName]="step.pageName"
           [leftFix]="step.leftFix?step.leftFix: 0"
           [topFix]="step.topFix?step.topFix: 0"
           [stepIndex]="i"
           [dStepsGuidePosition]="step.position"
           [observerDom]="step.targetElement">
      </div>
    </ng-container>
  </form>

  <apes-split *ngIf="searchFormViewType==='list'" [direction]="direction" [height]="_height">
    <apes-split-area minSize="30" [size]="leftSize" [order]="1">
      <div class="searchForm">
        <apes-card [apesTitle]="'查询条件'" [apesBordered]="false">
          <apes-search-form #search [form]="searchForm" [model]="searchModel" [options]="searchOption"
                            [searchFormMetadata]="searchFormMetadata" [ctx]="ctx"></apes-search-form>
        </apes-card>
      </div>
    </apes-split-area>
    <apes-split-area minSize="30" [size]="100-leftSize" [order]="2">
      <form apes-form>
        <apes-container [datas]="formMetadata" [form]="form" [model]="model" [options]="options" [height]="_height"
                        [apesPrefixCls]="'apes-container'">
          <apes-chatter [notes]="notes" [processInstanceId]="processInstanceId" [model]="model"></apes-chatter>
        </apes-container>
      </form>
    </apes-split-area>
  </apes-split>
</div>
<!--<div>{{ctx.states | json}}</div>-->
<!--<div>{{ctx.model | json}}</div>-->

